<template>
    <van-col span="24" class="nav_bar">
        <van-nav-bar title="个人中心" left-text="返回" :fixed="true" left-arrow @click-left="onClickLeft" />
    </van-col>

    <van-cell-group inset style="margin-top: 35px; background-color: #fcfcfc;" >
        <van-cell>
            <van-row spn="8">
                <van-col>头像</van-col>
                <van-col >
                    <div>  <van-image width="5rem" height="5rem" fit="cover" position="left"
                            :src="getImageUrl(userInfo.avator)" /></div>
                </van-col>
            </van-row>
            <van-row>
                <van-col>
                    <div> 用户名：{{ userInfo.userName }}</div>
                </van-col>
            </van-row>
        </van-cell>
        <van-cell>
            <van-row>
                <van-col>
                    <div> 性别：{{ userInfo.sex }}</div>
                </van-col>
            </van-row>
        </van-cell>
        <van-cell>
            <van-row>
                <van-col>
                    <div> 出生日期：{{ userInfo.birth }}</div>
                </van-col>
            </van-row>
        </van-cell>
        <van-cell>
            <van-row>
                <van-col>
                    <div> 个人简介：{{ userInfo.introduction }}</div>
                </van-col>
            </van-row>
        </van-cell>
    </van-cell-group>
    <van-button round type="success" size="large">退出登录</van-button>
</template>
<script setup>
import { ref, reactive, onMounted } from 'vue'
import { RouterLink, RouterView, routerKey } from 'vue-router'

import { useRouter } from 'vue-router';
import { default as http, getImageUrl } from '@/utils/request.js';
const active = ref(3);
const router = useRouter();
const onClickLeft = () => history.back();
const userInfo = reactive({
    avator: '',
    userName: '',
    sex: '',
    birth: '',
    introduction: ''
})

const getUserInfo = () => {
    console.log("==============");
    http.get("/user/info").then((res) => {
        console.log("获取个人信息= ", res);
        userInfo.userName = res.data.data.userName;
        userInfo.avator = res.data.data.avator;
        userInfo.sex = res.data.data.sex;
        userInfo.birth = res.data.data.birth;
        userInfo.introduction = res.data.data.introduction;
    }).catch(() => {
    });

}

onMounted(() => {
    // 获取个人信息  
    getUserInfo();

})
</script>
<style scoped>
.nav_bar {
    position: relative;
    top: -32px;
    /* left:-32px;
    right: -32px; */
    margin: 2px -32px
}
</style>